<template>
  <div class="box">
    <div class="title">账号基本资料</div>

    <el-descriptions class="margin-top" :column="3" border size="mini">
      <el-descriptions-item>
        <template slot="label">
          <div class="text-center">用户名</div>
        </template>
        <el-input placeholder="" :value="fromData.username"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <div class="text-center">姓名</div>
        </template>
        <el-input placeholder="" :value="fromData.name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <div class="text-center">同步更新Tree目录</div>
        </template>
        <el-checkbox v-model="fromData.checked">勾选单个权限生效</el-checkbox>
      </el-descriptions-item>
    </el-descriptions>

    <div class="title mt-4">权限配置</div>
    <div>
      <el-form inline :label-position="labelPosition" label-width="210px" :model="formLabelAlign">
        <el-form-item label="将此账号权限整体复制到该账号">
          <div class="d-flex">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button class="ml-1" type="primary" plain>确定复制</el-button>
          </div>

        </el-form-item>
        <el-form-item label="根据权限配置生成菜单">
          <div class="d-flex">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button class="ml-1" type="primary" plain>生成菜单</el-button>
          </div>
        </el-form-item>
        <el-form-item label="">
          <div class="d-flex">
            <el-button class="ml-6" type="primary" plain @click="dialogTableVisible=true">查看同步更新Tree目录的配置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <main>
      <div class="main">
        <div class="main_box" v-for="(v, i) in 20" :key="i">
          <div class="main_title">
            <span>挂靠点管理</span>
            <el-checkbox v-model="checked" class="ml-4" v-show="i == 0">全选</el-checkbox>
          </div>
          <div class="d-flex main_item" v-for="(x,i) in 3" :key="i">
            <div class="main_left w-100">微信订单</div>
            <div class="main_right">
              <div class="main_right_item">
                <el-checkbox v-model="checked">挂靠点查看</el-checkbox>
              </div>
              <div class="main_right_item" v-for="(item, i) in 8" :key="i">
                <el-checkbox v-model="checked">挂靠点查看</el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <el-dialog title="各区域权限关联目录如下" :visible.sync="dialogTableVisible" :lock-scroll="false">
          <el-table :data="gridData" border height="258px">
            <el-table-column property="date" label="城市名称" width="400"></el-table-column>
            <el-table-column property="name" label="城市代码" width="400"></el-table-column>
            <el-table-column property="address" label="目录数">
              <template slot-scope="scope">
                  <el-button type="primary" plain size="mini" @click="toView(scope.row)">99</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="text-primary mt-1 font-14">共100条记录</div>
        </el-dialog>
      </div>
    </main>
  </div>
</template>

<script>
/**
* @author        chenRong
* @time          2023-11-03 15:01:46  星期五
* @description   
**/

export default {
  data() {
    return {
      fromData: {
        username: "",
        name: "",
        checked: true,
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      checked: false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '广东河源'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '广东惠州'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '广东清远'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '广东汕尾'
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    toView(data) {
      const url = `http://jx.qida999.com/DriverCommon/system/logerPermission_chakan1.aspx?areaCode=GDHY&areaName=${data.address}`  
      // '_blank'  在新标签页中打开
      window.open(url,'_blank')

      
      // this.$router.push({ path: '/adminSystem/userAccountManag', query: { userno: row.userno } })
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog__body{
  padding-top: 10px;
}

.box {
  background-color: white;
  padding: 0px;
  .title {
    margin-bottom: 20px;
    color: #333;
  }
}

::v-deep .el-select {
  width: 100%;
}

.main {
  height: 530px;
  overflow: auto;
  width: 100%;
  border: 1px solid #EBEEF5;

  .main_title {
    width: 100%;
    height: 40px;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #909399;
  }

  .main_item {
    // height: 60px;
    border-bottom: 1px solid #EBEEF5;
    width: 100%;
    background-color: #fafafa;

    .main_left {
      width: 8%;
      justify-content: center;
      display: flex;
      align-items: center;
      padding: 0 10px;
      color: #909399;
      // background-color: #b4c1db;
    }

    .main_right {
      width: 92%;
      display: flex;
      align-items: center;
      background-color: white;
      flex-wrap: wrap;
      padding-bottom: 20px;
      padding-top: 10px;

      .main_right_item {
        margin-left: 40px;
        margin-top: 10px;
      }
    }
  }
}
</style>